import React, {PureComponent} from "react"
import cs from "classnames"
import Profile from "./component/profile"
import AppMenu from "./component/menu"
import {Route, Switch} from "react-router-dom"
import "./index.less"
import menus from "menus"
import AppHeader from "./component/header"
import {defaultStoreName, keySeparator, rootPath} from "init"
import {AppContext} from "../../shared/context/app-context"
import loading from "../../shared/libs/loading";
import AppCompose from "./app-compose"
import DynamicFont from 'react-dynamic-font'

const AppContainer = loading(() => import("./component/container"))
const ProfilePage = loading(() => import("../home"))
const AppendShop = loading(() => import("../my-shop/components/append"))
const EditShop = loading(() => import("../my-shop/components/edit"))
const MyShopView = loading(() => import("../my-shop/components/shop-view"))
const NotFound = loading(() => import("../errors/404"))
const ClothingBuyInfo = loading(() => import("../library/components/info"))
const OrderInfo = loading(() => import("../order/components/order-info"))
const OrderDetail = loading(() => import("../order/components/order-detail"))
const ClothingDetail = loading(() => import("../library/components/detail"))


export default @AppCompose
class App extends PureComponent {

	render() {


		const {
			menuCollapsed,
			setMenuCollapsed,
			userInfo,
			setUserInfo,
			location,
			getUserInfo,
			userInfoBusy
		} = this.props

		const {pathname} = location

		const contextValue = {
			menuCollapsed,
			setMenuCollapsed,
			userInfo,
			setUserInfo,
			pathname,
			userInfoBusy,
			refreshUser: getUserInfo
		}

		const clazz = cs({
			"zr-app-home": true,
			//菜单是否收起
			"collapsed": menuCollapsed
		})

		return (
			<AppContext.Provider value={contextValue}>
				<div className={clazz}>
					<div className='left'>
						<div className={cs({"zr-header": true, "hidden": menuCollapsed})}>
							<div>
								<DynamicFont content={userInfo.shopName || defaultStoreName}/>
							</div>
						</div>
						<Profile/>
						<AppMenu/>
					</div>
					<div className='right' id={'app-container-right'}>
						<AppHeader/>
						<AppContainer>
							<Switch>
								<Route exact={true} component={ProfilePage} path={`/`}/>
								<Route exact={true} component={ProfilePage} path={`/${rootPath}`}/>
								<Route exact={true} component={ProfilePage} path={`/${rootPath}/profile`}/>
								{createRoute(menus())}
								<Route exact={true} component={AppendShop} path={`/${rootPath}/my-shop/append`}/>
								<Route exact={true} component={EditShop} path={`/${rootPath}/my-shop/edit`}/>
								<Route exact={true} component={MyShopView} path={`/${rootPath}/my-shop/view`}/>
								<Route exact={true} component={ClothingBuyInfo} path={`/${rootPath}/library/buy/:id`}/>
								<Route exact={true} component={OrderInfo} path={`/${rootPath}/order/:id`}/>
								<Route exact={true} component={OrderDetail} path={`/${rootPath}/order/detail/:id`}/>
								<Route exact={true} component={ClothingDetail} path={`/${rootPath}/clothing/detail/:id`}/>
								<Route component={NotFound}/>
							</Switch>
						</AppContainer>
					</div>
				</div>
			</AppContext.Provider>
		)
	}
}

/**
 * 根据菜单配置生成Route
 * @param menus
 * @param pKey
 * @param pPath
 */
const createRoute = (menus, pKey, pPath) => {

	return menus.reduce((p, m) => {
		const _path = pPath ? `${pPath}/${m.key}` : `${rootPath}/${m.key}`
		const _key = `${pKey || ""}${keySeparator}${m.key}`
		const _param = m.param ? `/:${m.param.key}` : ""

		return p.concat(
			m.children
				? createRoute(m.children, _key, _path)
				: <Route exact={true} path={`/${_path}${_param}`} component={m.component} key={_key}/>
		)
	}, [])
}
